$main: #3786fd;

@mixin pos($top: 0, $right: $top, $bottom: $top, $left: $right) {
  top: $top;
  right: $right;
  bottom: $bottom;
  left: $left;
}

// 圆角
@mixin badge($width: 100%) {
  box-sizing: initial;
  min-width: $width;
  min-height: $width;
  line-height: $width;
  text-align: center;
  border-radius: $width;
}

// 多行文本溢出显示省略号
// -----------------------------------------------------------------------------
@mixin ells($line: 2, $line-height: 19px) {
  display: -webkit-box;
  max-height: $line-height * $line + 10px;
  overflow: hidden;
  line-height: $line-height;
  text-overflow: ellipsis;
  word-break: break-all;
  -webkit-line-clamp: $line;
  -webkit-box-orient: vertical;
}

// 单行文本溢出显示省略号
// -----------------------------------------------------------------------------
@mixin ell($align: inherit) {
  overflow: hidden;
  text-align: $align;
  text-overflow: ellipsis;
  word-wrap: normal;
  white-space: nowrap;
}

/* 定义滚动条样式 圆角和阴影不需要则传入null */
@mixin scrollBar($width: 10px, $height: 10px, $outColor: $bgColor, $innerColor: $bgGrey, $radius: 5px, $shadow: null) {
  /* 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸 */
  &::-webkit-scrollbar {
    width: $width;
    height: $height;
    background-color: $outColor;
  }

  /* 定义滚动条轨道 内阴影+圆角 */
  &::-webkit-scrollbar-track {
    @if ($shadow !=null) {
      -webkit-box-shadow: $shadow;
    }

    @if ($radius !=null) {
      border-radius: $radius;
    }

    background-color: $outColor;
  }

  /* 定义滑块 内阴影+圆角 */
  &::-webkit-scrollbar-thumb {
    @if ($shadow !=null) {
      -webkit-box-shadow: $shadow;
    }

    @if ($radius !=null) {
      border-radius: $radius;
    }

    background-color: $innerColor;
    border: 1px solid $innerColor;
  }
}

@mixin clearfix() {
  &::after {
    display: table;
    clear: both;
    content: "";
  }
}

@mixin scrollBar() {
  &::-webkit-scrollbar-track-piece {
    background: #d3dce6;
  }

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background: #99a9bf;
    border-radius: 20px;
  }
}

@mixin relative() {
  position: relative;
  width: 100%;
  height: 100%;
}

@mixin dialogBg() {
  background: rgba(15, 43, 102, 0.8);
  border-radius: 4px;
  // border: 2px solid rgba(0,163,255,0.7);
  border-image: linear-gradient(180deg, rgba(42, 204, 254, 0), #5289fc 52%, rgba(42, 204, 254, 0)) 2 2;
  box-shadow: 0 0 30px 0 rgba(0, 163, 255, 0.7) inset;
}
